<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    // 阻止事件冒泡
    // elent.stopPropagation();
    // event.cancelBubble = true; ie独有

    /**
     * 阻止事件冒泡
     * @Author   hflxhn.com
     * @DateTime 2019-11-03T16:56:16+0800
     * @param    {事件}                 event 事件对象
     */
    function stopBubble(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancelBubble();
        }
    }
    var div = document.getElementsByTagName('div')[0];
    div.onclick = function(e) {
        stopBubble(e);
        console.log('111');
    }

    document.onclick = function() {
        console.log('你闲的吗');
    }

</script>
</html>
